<template>
  <div>
    <button
      class="parkPay"
      @click="topPayWei()"
      v-show="payMoney"
      :disabled="payButton"
    >需支付{{lastPrice}}元,去支付</button>

  </div>
</template>

<script>
import {
  Icon,
  Popup,
  Button,
  Cell,
  CellGroup,
  Checkbox,
  RadioGroup,
  CountDown
} from 'vant'

export default {
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [RadioGroup.name]: RadioGroup,
    [CountDown.name]: CountDown
  },
  model: {
    // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
    prop: 'showPayment',
    event: 'close'
  },
  props: {
    showPayment: false
  },
  computed: {
    showDialog: {
      get: function () {
        return this.showPayment
      },
      set: function (value) {
        this.$emit('close', value)
      }
    }
  },
  methods: {
    //  点击立即缴费调取支付接口
    topPayWei () {
      const that = this
      this.$http
        .post('/server-park/h5/park/createOrder', {
          shopId: this.shopId,
          openId: this.openId,
          memberId: this.memberId,
          plateNumber: this.carNum,
          canUseParkcouponIds: this.canUseParkcouponIds,
          usePoints: this.count,
          isUseMemberRight: this.isUseMemberRight
        })
        .then(
          function (res) {
            if (res.data.code === 0) {
              that.wxpay(res.data.data) // 调取支付
            } else {
              alert(res.data.msg)
            }
          },
          function (res) {
            alert('请求失败')
          }
        )
    },
    wxpay (data) {
      var vm = this
      // 下面是解决WeixinJSBridge is not defined 报错的方法
      if (typeof WeixinJSBridge === 'undefined') {
        // 微信浏览器内置对象。参考微信官方文档
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            vm.onBridgeReady(data),
            false
          )
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
          document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
        }
      } else {
        vm.onBridgeReady(data)
      }
    },
    onBridgeReady (data) {
      var vm = this
      // eslint-disable-next-line no-undef
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
        // 下面参数内容都是后台返回的
        debug: true,
        appId: data.appId, // 公众号名称，由商户传入
        timeStamp: data.timeStamp, // 时间戳
        nonceStr: data.nonceStr, // 随机串
        package: data.packageValue, // 预支付id
        signType: data.signType, // 微信签名方式
        paySign: data.paySign // 微信签名
      },
      function (res) {
        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          vm.$router.push('/successPay')
        } else {
          // alert("支付失败,请跳转页面"+res.err_msg);
        }
      }
      )
    }
  }
}
</script>
